<template>
  <div v-show="dialogValue" class="user1-add f-c">
    <BackPage title="政策推荐编辑、添加" show-back @back="onPageBack" />
    <div class="user1-add-box f-g">
      <el-form ref="formRef" :model="ruleForm" :rules="rules" label-position="top" class="user-add-form">
        <el-form-item label="标题" prop="title">
          <el-input v-model="ruleForm.title" clearable style="width: 658px;" />
        </el-form-item>
        <el-form-item label="分类" prop="policyType">
          <el-select v-model="ruleForm.policyType" clearable>
            <el-option v-for="item in options1" :key="item.value" :value="item.value" :label="item.name" />
          </el-select>
        </el-form-item>

        <el-form-item label="发布时间" prop="reaseTime">
          <el-date-picker v-model="ruleForm.reaseTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" style="width: 658px;" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <Rich v-model="ruleForm.content" />
        </el-form-item>
        <el-form-item label="图片" prop="img">
          <DragUpload :url="ruleForm.img" @on-success="url => ruleForm.img = url" />
        </el-form-item>
        <el-form-item label="附件">
          <UploadMultiple v-model="fileList" />
        </el-form-item>
        <el-form-item label="显示状态">
          <el-switch v-model="ruleForm.status" :active-value="0" :inactive-value="1" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSave">保存</el-button>
          <el-button @click="dialogValue = false">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import UploadMultiple from '@/components/DragUpload/multiple'

import { http_policy } from '@/api'
import dayjs from 'dayjs'
export default {
  name: 'User1Add',
  components: {
    UploadMultiple
  },
  data() {
    return {
      dialogValue: false,
      options1: [
        { value: 1, name: '企业类政策' },
        { value: 2, name: '金融类政策' },
        { value: 3, name: '政府政策快报' }
      ],
      ruleForm: {
        id: undefined,
        title: '',
        policyType: '',
        reaseTime: '',
        content: '',
        img: '',
        sort: ''
      },
      rules: {
        title: [{ required: true, message: '不能为空' }],
        policyType: [{ required: true, message: '不能为空' }],
        reaseTime: [{ required: true, message: '不能为空' }],
        content: [{ required: true, message: '不能为空' }]
      },
      fileList: []
    }
  },
  methods: {
    async open(item) {
      if (item) {
        for (const key in this.ruleForm) {
          this.ruleForm[key] = item[key]
        }
        this.fileList = (item.policyFileList || []).map(el => {
          const file = el.file ? JSON.parse(el.file) : {}
          return {
            ...el,
            file: undefined,
            fileUrl: file.fileUrl,
            fileType: file.fileType,
            fileName: file.fileName
          }
        })
      } else {
        this.ruleForm = {
          id: undefined,
          title: '',
          policyType: '',
          reaseTime: dayjs().format('YYYY-MM-DD hh:mm:ss'),
          content: '',
          img: '',
          sort: 0
        }
      }
      this.dialogValue = true
    },
    onPageBack() {
      this.$emit('get-page')
      this.dialogValue = false
    },
    onSave() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          const policyFileList = this.fileList.map(el => {
            return {
              id: el.id,
              policyId: this.ruleForm.id,
              file: JSON.stringify({
                fileType: el.fileType,
                fileUrl: el.fileUrl,
                fileName: el.fileName
              })
            }
          })
          http_policy[this.ruleForm.id ? 'update' : 'create']({ ...this.ruleForm, policyFileList }).then(res => {
            this.$message.success(res.msg)
            this.onPageBack()
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.user1-add {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background-color: #F6F6F6;
}
.user1-add-box {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(185, 185, 185, .3);
  border-radius: 16px;
  padding: 60px;
}
</style>
